<template>
  <div>
    <div class="permissTool">
        <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
        <template slot="prepend">ROLE_</template>
        </el-input>
      <el-input size="small" placeholder="请输入角色名称" v-model="role.namezh" @keydown.enter.native="addRole"></el-input>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="addRole">添加角色</el-button>
    </div>
    <div class="permissMain">
      <el-collapse v-model="activeName" accordion @change="changeCollapse">
        <el-collapse-item :title="role.namezh" :name="role.id" v-for="(role,index) in roles" :key="index">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>可访问资源</span>
              <el-button style="float: right; padding: 3px 0;color: red" icon="el-icon-delete" type="text" @click="deleteRole(role.id)"></el-button>
            </div>
            <div>
<!--              default-checked-keys : 默认选中的数组
                  node-key="id" : 为树指定唯一的一个字段值
-->
              <el-tree
                  :data="menus"
                  :props="defaultProps"
                  ref="tree"
                  :key="index"
                  show-checkbox
                  :default-checked-keys="selectMenus"
                  node-key="id"
              ></el-tree>
            </div>
            <div style="display: flex;justify-content: flex-end">
              <el-button size="mini" @click="cancelEdit">取消修改</el-button>
              <el-button size="mini" @click="handleEdit(role.id,index)" type="primary">确认修改</el-button>
            </div>
          </el-card>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "PermissMana",
  data() {
    return {
      role:{
        name:'',
        namezh:""
      },
      activeName:-1,
      roles:[],
      menus:[],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      selectMenus:[]
    }
  },
  mounted() {
    this.initRoles();
  },
  methods:{

    /**
     * 添加角色
     */
    addRole() {
      if (this.role.name && this.role.namezh) {
        this.postRequest("/system/basic/permiss/role",this.role).then(resp => {
          if (resp) {
            this.initRoles();
            this.role.name = '';
            this.role.namezh = '';
          }
        })
      }else {
        this.$message.error("请输入全部字段")
      }

    },

    /**
     * 删除角色
     */
    deleteRole(rid) {
      this.deleteRequest("/system/basic/permiss/role/" + rid).then(resp => {
        if (resp) {
          this.initRoles();
        }
      })
    },


    /**
     * 修改角色菜单
     */
    handleEdit(rid,index) {
        // 获取选中的菜单值,true:去除父节点，只取子节点
        let selectMenus = this.$refs.tree[index].getCheckedKeys(true);
        let url = "/system/basic/permiss/menu/role?rid=" + rid;
        selectMenus.forEach(mid => {
          url += "&mids=" + mid;
        })
      this.putRequest(url).then(resp => {
        if (resp) {
          this.initRoles();
          this.activeName = -1
        }
      })
    },


    /**
     * 取消折叠面板
     */
    cancelEdit() {
      this.activeName = -1;
    },

    /**
     *  折叠面板的点击事件
     */
    changeCollapse(val) {
      // val:获取的是el-collapse-item中的name属性,即选中的角色id
        if (val) {
          this.initMenus();
          this.initSelectMenus(val)
        }
    },

    /**
     *  通过角色获取对应的菜单
     */
    initSelectMenus(rid) {
       this.getRequest("/system/basic/permiss/menu/" + rid).then(resp => {
         if (resp) {
           this.selectMenus = resp;
         }
       })
    },

    /**
     * 获取所有菜单
     */
    initMenus() {
      this.getRequest("/system/basic/permiss/menu").then(resp => {
        if (resp) {
          this.menus = resp;
        }
      })
    },
    /**
     * 查询所有角色
     */
    initRoles() {
      this.getRequest("/system/basic/permiss/role").then(resp => {
        if (resp) {
          this.roles = resp;
        }
      })
    }
  }
}
</script>

<style scoped>
      .permissTool {
        display: flex;
        justify-content: flex-start;
      }
      .permissTool .el-input {
        width: 300px;
        margin-right: 8px;
      }
      .permissMain {
        margin-top: 20px;
        width: 700px;
      }
 </style>